<template>
    <div class="verifyCode">

        <!--手机号-->
        <div class="iphoneNo">
            <Input type="text"
                   v-model="iphoneNo"
                   placeholder="请输入手机号"
                   size="large"
                   clearable
                   @on-blur="checkIphoneNo"
                   prefix="ios-phone-portrait"/>
        </div>
        <div class="tip">
            {{iphoneNoTip}}
        </div>

        <!--验证码盒子-->
        <div class="box">
            <!--验证码输入框-->
            <div class="input">
                <Input
                        type="text"
                        v-model="verifyCode"
                        placeholder="验证码"
                        size="large"
                        clearable
                        prefix="ios-lock-outline"
                        @on-enter="enter"/>
            </div>
            <div class="button">
                <!--获取验证码-->
                <div v-if="verifyCodeButtonFlag">
                    <Button
                            html-type="button"
                            style="background-color: #19be6b;
                          color: #FFFFFF;
                          width: 110px;
                          height: 40px"
                            @click="getSmsCode">
                        获取验证码
                    </Button>
                </div>
                <!--重新获取验证码-->
                <div v-else="!verifyCodeButtonFlag">
                    <Button
                            html-type="button"
                            style="border:1px solid #DDDDDD;
                          background-color: #FFFFFF;
                          color: #B1B1B1;
                          font-size: 16px;
                          width: 110px;
                          height: 40px;">
                        {{countDown}}秒后重发
                    </Button>
                </div>
            </div>
        </div>
        <div class="tip">
            {{verifyCodeTip}}
        </div>

        <!--登录按钮-->
        <div class="btn-box">
            <Button type="success"
                    size="large"
                    html-type="button"
                    style="width: 100%"
                    @click="login">
                登录
            </Button>
        </div>

        <!--去注册-->
        <div class="reg-box">
            <div class="reg" @click="intoRegister">去注册 ></div>
        </div>
    </div>
</template>

<script>
    import {checkIsIphoneNo, checkStrIsNull} from "@/tools/check";

    export default {
        name: "",
        components: {},
        data() {
            return {
                iphoneNo: "",
                iphoneNoTip: "",
                //验证码
                verifyCode: "",
                //获取验证码提示
                verifyCodeTip: "",
                //发送验证码按钮切换
                verifyCodeButtonFlag: true,
                //重新发送倒计时
                countDown: 30,
                //定时器
                c: null,
            }
        },
        methods: {
            checkIphoneNo: function () {
                let flag = true
                this.iphoneNoTip = ""
                let b = checkStrIsNull(this.iphoneNo);
                if (b) {
                    this.iphoneNoTip = "手机号不能为空"
                    flag = false
                } else {
                    let b1 = checkIsIphoneNo(this.iphoneNo);
                    if (!b1) {
                        this.iphoneNoTip = "手机号格式非法"
                        flag = false
                    }
                }
                return flag
            },
            //发送验证码
            getSmsCode: function () {
                let b = this.checkIphoneNo();
                if (!b) {
                    return
                }

                //设置按钮提示
                this.verifyCodeButtonFlag = false;
                this.c = setInterval(() => {
                    this.countDown--;
                    //当计数为0时，回复初始状态
                    if (this.countDown == 0) {
                        this.countDown = 30;
                        this.verifyCodeButtonFlag = true;
                        clearInterval(this.c);
                    }
                }, 1000)

                this.axios.get(`/login/login/user/${this.iphoneNo}`)
                    .then((data) => {
                        //账号未注册
                        if (data.code == 20002) {
                            this.$Message.warning({
                                background: true,
                                duration: 2,
                                content: '该账号未注册'
                            });
                            this.iphoneNoTip = "该账号未注册"
                            this.countDown = 30;
                            this.verifyCodeButtonFlag = true;
                            clearInterval(this.c);
                        }
                        //查收短信
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                duration: 2,
                                content: '请查收短信'
                            });
                            this.verifyCodeTip = "请查收短信"
                        }
                    })


            },
            //enter
            enter: function () {
                this.login()
            },
            check: function () {
                let flag = true
                let b = checkStrIsNull(this.iphoneNo);
                if (b) {
                    this.iphoneNoTip = "手机号不能为空"
                    flag = false
                } else {
                    let b1 = checkIsIphoneNo(this.iphoneNo);
                    if (!b1) {
                        this.iphoneNoTip = "手机号格式非法"
                        flag = false
                    }
                }
                return flag
            },
            //登录
            login: function () {
                this.iphoneNoTip = ""
                this.verifyCodeTip = ""
                let b = this.check();
                if (!b) {
                    return
                }

                this.axios.get(`/login/login/user/${this.iphoneNo}/${this.verifyCode}`)
                    .then((data) => {
                        if (data.code == 20011) {
                            this.$Message.error({
                                background: true,
                                duration: 2,
                                content: '验证码错误或失效'
                            });
                            this.verifyCodeTip = "验证码错误或失效"
                        }
                        if (data.code == 20002) {
                            this.$Message.error({
                                background: true,
                                duration: 2,
                                content: '该账号未注册'
                            });
                            this.iphoneNoTip = "该账号未注册"
                        }
                        if (data.code == 200) {
                            let token = data.data.token;
                            let webUser = data.data.webUser;

                            //将后台的数据前端本地化，后台修改字段，前台只要修改这里即可
                            let user = {
                                userId: webUser.webUserId,
                                userName: webUser.userName,
                                iphoneNo: webUser.iphoneNo,
                                userEmail: webUser.userEmail,
                                headPortrait: webUser.headPortrait,
                                vip:webUser.vip
                            }

                            //将用户对象信息 字符串化
                            let userInfo = JSON.stringify(user);
                            //存到本地
                            window.sessionStorage.setItem("isLogin", true);
                            window.sessionStorage.setItem("token", token);
                            window.sessionStorage.setItem("userInfo", userInfo);

                            //存到Vuex
                            this.$store.dispatch("updateId", user.userId);
                            this.$store.dispatch("updateIsLogin", true);
                            this.$store.dispatch("updateToken", token);
                            this.$store.dispatch("updateUserInfo", user);

                            //跳转到首页
                            this.$router.push("/");
                        }
                    })
            },
            //点击去注册
            intoRegister: function () {
                this.$router.push("/register");
            }
        },
        mounted() {
        },
        beforeDestroy() {
            //离开页面清理定时器
            clearInterval(this.c);
        }
    }
</script>

<style scoped>

    .verifyCode {
        width: 94%;
        margin: 14px auto 0px;
    }

    /*信息提示*/
    .tip {
        height: 24px;
        color: #FF0000;
        font-size: 14px;
        line-height: 20px;
        padding-left: 8px;
    }

    .box {
        overflow: hidden;
    }

    /*验证码输入框*/
    .box .input {
        float: left;
        width: 176px;
    }

    /*验证码按钮*/
    .box .button {
        float: right;
    }

    /*登录按钮*/
    .btn-box {
        margin-top: 10px;
    }

    /*去注册*/
    .reg-box {
        overflow: hidden;
    }

    .reg-box .reg {
        height: 20px;
        width: 66px;
        float: right;
        font-size: 14px;
        line-height: 20px;
        color: #FF0000;
        text-align: right;
        margin: 10px 0px 10px 0px;
        padding-right: 4px;
        cursor: pointer;
    }
</style>